<template>
  <div class='appointment-successful'>
    <div class="success-main middle-wrapper">
      <img class="success-img" src="@/assets/images/front/appointment_successful.png">
      <span class="title">预约成功</span>
      <div class="content">
        <div class="content-title">课程预约信息</div>
        <div class="content-info">
          <div class="label">课程名称：</div>
          <div>{{ orderDetails.order.courseName }}</div>
        </div>
        <div class="content-info">
          <div class="label">课程分类： </div>
          <div>{{ courseTypeList.dict[courseDetils.courseData.type] }}</div>
        </div>
        <div class="content-info">
          <div class="label">作者：</div>
          <div>{{ orderDetails.expert.name }}</div>
        </div>
        <div class="content-info">
          <div class="label">作者所在机构：</div>
          <div>{{ orderDetails.expert.unit }}</div>
        </div>
        <div class="content-info">
          <div class="label">作者职称：</div>
          <div>{{ orderDetails.expert.expertTitle }}</div>
        </div>
        <div class="content-info">
          <div class="label">课程日期：</div>
          <div>{{ format(orderDetails.order.appointTime) }} {{ orderDetails.order.timeType == 1 ? '下午场' : '上午场' }}</div>
        </div>
        <div class="content-info">
          <div class="label">地点：</div>
          <div>{{ orderDetails.order.location }}</div>
        </div>
        <div class="content-info">
          <div class="label">听众人数：</div>
          <div>{{ orderDetails.order.listenerCount }}</div>
        </div>
        <div class="content-info">
          <div class="label">联系人：</div>
          <div>{{ orderDetails.order.linkMan }}</div>
        </div>
        <div class="content-info">
          <div class="label">联系人电话：</div>
          <div>{{ orderDetails.order.linkManTel }}</div>
        </div>
        <div class="content-info">
          <div class="label">申请单位：</div>
          <div>{{ orderDetails.order.applicants }}</div>
        </div>
        <div class="content-info">
          <div class="label">预约说明：</div>
          <div>{{ orderDetails.order.appointDescribe }}</div>
        </div>
      </div>
      <div class="button">
        <el-button size="large" round @click="router.back()">返回</el-button>
        <el-button size="large" type="primary" round @click="router.push('/personal-center/myorder')">查看预约</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppointmentSuccessful'
}
</script>
<script setup>
import { ref } from 'vue';
import { useSystemStore } from '@/stores/modules/system.js';
import { useRouter, useRoute } from 'vue-router'
import { http } from '@/utils/http/index.js'
import { format } from '@/plugins/moment.js'

const router = useRouter()
const route = useRoute()
const systemStore = useSystemStore()

/**设置头部 */
systemStore.headerType = 'logo_default'
systemStore.headerWidthType = 'middle'
systemStore.headerBgcolor = 'theme-color'
systemStore.headerFontColor = '1'

const courseDetils = ref({ courseData: {}, expertData: {} })
const getCourseDetail = (id) => {
  http.$GET('/Preach/GetPreachCourseDetail', { id }).then(res => {
    if (res.isError) return
    courseDetils.value = res.result
    getType()
  })
}

const courseTypeList = ref({ options: [], dict: {} })
const getType = () => {
  http.$POST('/PreachM/GetPreachCourseTypeInfoList', { pageIndex: 1, pageSize: 99 }).then(res => {
    if (res.isError) return
    courseTypeList.value = {
      options: res.result.dataLst,
      dict: res.result.dataLst.reduce((pre, next) => ({ ...pre, [`${next.id}`]: next.courseTypeName }), {})
    }
  })
}

const orderDetails = ref({ expert: {}, order: {} })
const getDeatils = () => {
  http.$GET('/Preach/GetPreachOrderDetail', { id: route.query.id }).then(res => {
    if (res.isError) return
    orderDetails.value = res.result
    getCourseDetail(orderDetails.value.order.courseId)
  })
}

!route.query.id ? router.back() : getDeatils()



</script>
<style lang="scss" scoped>
.appointment-successful {
  width: 100%;
  font-family: PingFang SC-Medium, PingFang SC;
  background-color: #FAF8F8;
  padding-top: 42px;
  padding-bottom: 92px;

  .success-main {
    background-color: #fff;
    height: 1168px;
    display: flex;
    padding: 22px 0 66px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .success-img {
      width: 281px;
      height: 259px;
      display: block;
      object-fit: cover;
    }

    .title {
      font-size: 23px;
      font-weight: 500;
      margin: 24px 0 38px;
    }

    .content {
      width: 60%;
      min-height: 629px;
      background: #FFFFFF;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      border: 1px solid #DEDEDE;
      padding: 31px 55px 0;
      font-size: 20px;

      .content-title {
        font-weight: 500;
        color: #3E3E3E;
        margin-bottom: 24px;
      }

      .content-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 14px;
        color: #333;

        .label {
          min-width: 150px;
          color: #808080;
        }
      }
    }

    .button {
      margin-top: 47px;

      :deep(.el-button) {
        width: 155px;
        height: 50px;
        border-radius: 26px;
      }
    }
  }
}
</style>
